<template>
    <div style="width: 60%;float: left;overflow:auto;height: 600px;">
        <ul>
            <li style="height: 150px;background-color: aliceblue;list-style-type: none;margin-top: 10px;" v-for="index in news " @click="content(index)">
                <!-- <img :src="url" alt="" style="width: 250px;height: 150px;" > -->
                <p style="color: brown;padding-top: 5%;">{{index.category}}</p>
                <p style="line-height: normal;font-size: 20px;">{{index.title}}</p>
                
            </li>
        </ul>
    </div>
    
    <div style="width: 30%;float: left;margin-left: 9.6%;">
        <h2 style="color: blue;margin-left: 9.1%;">热门推荐</h2>
        <ul style="float: left;width: 100%;">
            <li v-for="itme in news" style="list-style-type: none;margin-bottom: 3px;" @click="content1(itme)">
                <p id="Hot" style="color: brown;">{{itme.title.slice(0,10)}}</p>
            </li>
        </ul>
        <el-button type="primary" style="margin-left: 9.5%;" @click="quit">Quit</el-button>
        <el-button type="primary" style="margin-left: 9.5%;" v-show="user.role" @click="BackGround">BackGround</el-button>
    </div>
    
</template>

<script>

import router from "@/router";
import axios from 'axios';
import store from "@/store"

export default {
    name:'Home',
    data(){
        return{
            url:require("@/assets/1.jpg"),
            hello:'新闻标题',
            news:{},
            user:{}
        }
    },
    mounted(){
        this.user=JSON.parse(localStorage.getItem("user"))
        axios.get(`http://localhost:8080/getNews`).then(res=>{
            console.log(res.data);
            this.news=res.data
            this.news.sort(function(a, b){
                return b.readTimes - a.readTimes 
            })

        }).catch(error=>{
            console.log(error);
        })
        
    
    },
    methods:{
        content(index){
            store.state.new=index
            router.push('/content') 
            console.log(index);
        },
        content1(itme){
            store.state.new=itme
            router.push('/content') 
        },
        quit(){
            localStorage.removeItem("user");
            router.push('/')
        },
        BackGround(){
            router.push('/background')
        }
    }
}

</script>

<style scoped>
p{
    margin-left: 10%;
    
}
</style>